@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";
@import "admin_lte_skins";
@import "admin_lte";
@import "leaflet";
@import "MarkerCluster.Default";
@import "MarkerCluster";
@import "datepicker";
@import "bootstrap-social";

@import "app/*";

html.full-height, html.full-height body {
  height: 100%;
}

img {
  max-width: 100%;
}

img.fit-width, .full-width {
  width: 100%;
}

.site-name {
  @extend .hidden-sm;
  @extend .hidden-xs;
  float: right;
  font-size: 18px;
  line-height: 50px;
  padding: 0 10px;
  font-family: Abel, Helvetica, Arial, sans-serif;
  font-weight: normal;
  height: 50px;
  display: block;
  margin: 0;
  color: #fff;
  a {
    color: #fff;
  }
}

img.img-full {
  width: 100%;
}

th.actions, td.actions {
  text-align: right;
}

.text-gray {
  color: #ccc;
}

.input-huge {
  font-size: 30px;
  height: 60px;
}

.discreet {
  color: #aaa;
}

.flash {
  color: #333;
}

.push-down {
  margin-top: 25px;
}

.radios {
  label {
    display: block;
  }
  label.inline {
    display: inline;
    font-weight: normal;
  }
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    display: inline;
    &:after {
      display: inline-block;
      margin: 0 10px;
      content: "\00A0|";
    }
    &:last-child:after {
      display: inline;
      margin: 0;
      content: "";
    }
  }
}

.main-footer.no-margin-left {
  margin-left: 0;
}

.text-pink {
  color: #ff82ab;
}

.icon-huge {
  font-size: 175pt;
}

.with-title {
  cursor: pointer;
}

.dropdown-toggle.padding {
  padding-right: 25px;
}

.style-blue {
  background-color: #367fa9;
}

.style-yellow {
  background-color: #e08e0b;
}

.style-green {
  background-color: #00a65a;
}

.style-purple {
  background-color: #605ca8;
}

.style-red {
  background-color: #dd4b39;
}

.style-black {
  background-color: #111;
}

.style-dark {
  background-color: #444;
}

.style-light {
  background-color: #aaa;
}

#site-colors > label.active, #site-shades > label.active {
  width: 50px;
  height: 50px;
}

#site-colors > label:hover, #site-shades > label:hover {
  height: 50px;
  transition: height 2s;
}

.btn span.fa {
  opacity: 0;
  color: white;
}

.btn.active span.fa {
 opacity: 1;
}

.user-header {
  display: inline-block;
  font-weight: 600;
}

.user-header > * {
  padding: 5px;
}

.user-menu {
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  .user-header {
    width: 100%;
  }
  .user-body {
    .distribute {
      display: flex;
      flex-direction: row;
      width: 100%;
      .item {
        flex-grow: 1;
        text-align: center;
      }
    }
  }
}
